radial-gradient()

我從前只以為它只有圓形，只能從中心開始漸層
結果發現...不!不只是這樣的!

background: radial-gradient(
         形狀 範圍  at 中心位置,
         顏色 色彩位置, 
         顏色 色彩位置, 
         顏色 色彩位置,
         ...);

形狀：

• ellipse 橢圓形 (預設)
  

• circle 圓形
  

範圍

橢圓跟圓形非常好理解~接下來這四個範圍要稍微思考一下囉!
先讓我們看一下MDN上漸變的組成圖

請注意100%是指漸變的結束位置

再來複習一下香蕉(?)跟相切的差異!

然後就可以開始看這四個神奇的屬性了~
(這邊我沒有設定形狀，因此都是預設的橢圓ellipse)

• closest-side 與最近的邊"相切"(注意漸層結束位置會去碰四邊的線)
  

• closest-corner 與最近的角"相交"(注意漸層結束位置會去碰四邊的角)
  

• farthest-side 與最遠的邊"相切"
  

• farthest-corner 與最遠的角"相交"
  

ㄟㄟㄟ~看到這裡可能開始有感覺到side跟corner的差別了
可是沒有辦法感覺到closest跟farthest的差別在哪(|||ﾟдﾟ)

嘿~請繼續往下↓↓↓↓↓↓↓

at 中心位置：

• center (預設)
• (top / bottom / left / right)
• (top/bottom/left/right/center)　(top/bottom/left/right/center)
• px
• %
  剛剛的例子，當我設定了中心位置之後，就可以看出closest跟farthest的差別啦!
  

需要實際感受請來看看codepen
OS: JS沒有寫得很好XD

色彩&色彩位置：同linear-gradient

顏色：

• RGB
• RGBA
• HSL
• HSLA
• 關鍵字(red / blue / yellow / transparent...)

色彩位置：

• px
• %

參考資料：

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()